<template>
  <div class="sqlEditor-wrapper">
    <textarea :value="sql" id="sqlEditor" cols="30" rows="10"></textarea>
  </div>
</template>
<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
import 'codemirror/theme/eclipse.css';
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
let CodeMirror = require("codemirror/lib/codemirror");
export default {
  name: 'sqlEditor',
  props: ['sql'],
  model: {prop: 'sql', event: 'change'},
  data() {
    return {
      value: '',
      editor: null
    };
  },
  created() {
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      let editor = CodeMirror.fromTextArea(document.getElementById('sqlEditor'), {
        mode: 'text/x-sql',//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
        theme: "eclipse",
        indentWithTabs: false, //在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
        smartIndent: true,//自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
        lineNumbers: true,//是否在编辑器左侧显示行号。
        matchBrackets: true,// 匹配括号
        cursorHeight: 1, //光标高度。默认为1，也就是撑满行高。对一些字体，设置0.85看起来会更好。
        lineWrapping: true,// 自动换行
        autofocus: true,//是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。
        hintOptions: {
          tables: {
            users: ['name', 'score', 'birthDate'],
            countries: ['name', 'population', 'size']
          }
        },
        fontSize: 16,
      });
      this.editor = editor;
      editor.on('keyup', (cm, event) => {
        if (!cm.state.completeActive && ((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode === 52 || event.keyCode === 219 || event.keyCode === 190)) {
          CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
        }
        this.$emit('change', editor.getValue());
      });
    },
    setTables(tables) {
      this.editor.options.hintOptions.tables = tables.reduce((r, i) => {
        r[i] = [];
        return r;
      }, {});
    },
    setTableFields(tableName, fields) {
      let tables = this.editor.options.hintOptions.tables[tableName] = fields;
    }
  },
};
</script>
<style lang="scss">
.sqlEditor-wrapper {
  .CodeMirror-scroll {
    font-size: 16px !important;
  }
}
</style>